<div class="row-fluid">
<h2 class="pull-left" id="azuria">Eidolons</h2><br><br>
</div>

<!-- begin content -->
<div class="node format">
			
	<p><!-- TWO-COLUMNS --></p>
<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Overlock:400,700);
@keyframes cf3FadeInOut {0% {opacity:1;}45% {opacity:1;}55% {opacity:0;}100% {opacity:0;}}
@-webkit-keyframes cf3FadeInOut {0% {opacity:1;}45% {opacity:1;}55% {opacity:0;}100% {opacity:0;}}

#whole *{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
#whole{width:712;height:946px;background:url(http://s.aeriastatic.com/files/aurakingdom/image/a/ark_node_bg.jpg) 0 0 no-repeat;position:relative;overflow:hidden;font-family:'Overlock', cursive sans-serif;-webkit-animation:fadeIt 0.5s ease;-moz-animation:fadeIt 0.5s ease;-o-animation:fadeIt 0.5s ease;-ms-animation:fadeIt 0.5s ease;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1);}
@-webkit-keyframes fadeIt{0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}}
@-moz-keyframes fadeIt{0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}}
@-o-keyframes fadeIt{0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}}
@-ms-keyframes fadeIt{0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}}
#noie{display:none;}

#carousel h1, #carousel section{color:#fff;text-shadow:0 2px 2px #000;}

#carousel h1{width:inherit;text-align:left;text-transform:uppercase;font-size:45px;font-weight:700;margin:25px 0 25px 0;padding-left: 10%;}
#carousel h2{font-size:23px;text-transform:uppercase;font-weight:700;margin:0 0 14px 0;color:#fff;text-shadow: 0 2px 0 #000000;}
#carousel p, #carousel h3{font-size:14px;line-height:23px;text-shadow: 0 1px 0 #000000;}
#carousel p{color:#fff;}
#carousel p span{color:#fff;}
#carousel h3{margin:10px 0 0 0;}

#carousel{height:inherit;position:relative;-webkit-transition:0.3s ease;-moz-transition:0.3s ease;-o-transition:0.3s ease;-ms-transition:0.3s ease;}
#carousel > p{display:none !important;}
section{float:left;width:712px;height:inherit;}
section > img{width:250px;height:350px;padding:12px 45px 0 20px !important;position:relative;}

.slider aside, .slider span{background-image:url(http://s.aeriastatic.com/files/aurakingdom/image/a/ark-node-slidersv3.png);background-repeat:no-repeat;}
.slider{width:58px;height:58px;position:absolute;top:0;opacity:0.9;z-index:2;}
aside{width:inherit;height:inherit;position:relative;z-index:1;box-shadow:0 0 15px #000;}
#left{left:0;}
#left aside{background-position:-57px -114px;}
#right{right:0;}
#right aside{background-position:0 -114px;}
.slider:hover{opacity:1;cursor:pointer;}
.slider span{width:44px;height:57px;position:absolute;top:0;display:block;-webkit-transition:0.1s ease;-moz-transition:0.1s ease;-o-transition:0.1s ease;-ms-transition:0.1s ease;}
#left span{left:-114px;background-position:-64px -57px;}
#left:hover span{left:57px;}
#right span{right:-114px;background-position:0 0;}
#right:hover span{right:58px;}
.slider span img{width:100%;height:100%;margin:0 auto !important;display:block;}

article{width:260px;height:450px;margin:0 0 0 0 !important;padding:0 10px 0 0 !important;float:left;}
article > div{height:inherit;floatcenter;}
article > div:nth-child(1){width:330px;height:225px;padding:5px 0 0 20px !important;}
article > div:nth-child(2){width:330px;height:200px;padding:0 0 0 20px !important;}

.stat-bar{width:300px;height:10px;background-color:#000;box-shadow:0 0 0 1px #708d63;position:relative;margin:0 0 8px 0 !important;}
.filled{height:inherit;background-color:#a6c652;position:absolute;top:0;left:0;}
.stat-bar p{left:10px;color:#fff !important;position:absolute;right:-25px;top:-7px;}

#carousel iframe{width:670px;height:376px;margin:34px 0 0 21px;box-shadow:0 0 0 1px #fffa62, 0 2px 5px 2px #000;}

.stats-container {bottom:10px;width:326px;height:189px;overflow:hidden;position:relative;}
.stats-row {left:10px;width:326px;height:63px;padding:0 !important; margin:0 !important; overflow:hidden;position:relative;background:url(http://s.aeriastatic.com/files/aurakingdom/image/a/ark_stats_bg.png) no-repeat;}
.stats-tile-l {width:163px;height:63px;padding:0px !important; margin:0 !important; float:left;}
.stats-tile-l p {padding:0 0 0 10px !important;}
.stats-tile-r {width:163px;height:63px;padding:0px !important; margin:0 !important; float:right;}
.stats-tile-r p {padding:0 0 0 10px !important;}

.star-0 {background:url(http://cms-content.s.aeriastatic.com/dbb1420fd45bb16efb39e800e8a1c1f2/files/aurakingdom/image/a/ark_stars_0.png) 7px 22px no-repeat;}
.star-1 {background:url(http://cms-content.s.aeriastatic.com/0399456b944c2fb87209e12fd639e5d0/files/aurakingdom/image/a/ark_stars_1.png) 7px 22px no-repeat;}
.star-2 {background:url(http://cms-content.s.aeriastatic.com/9320ae20631f3696e5f285440bb9fff2/files/aurakingdom/image/a/ark_stars_2.png) 7px 22px no-repeat;}
.star-3 {background:url(http://cms-content.s.aeriastatic.com/ccd9c386b16c62993b7da91b4b71f96d/files/aurakingdom/image/a/ark_stars_3.png) 7px 22px no-repeat;}
</style>
<!--[if IE 8]>
<style type="text/css">
	#whole{display:none;}
	#noie{display:block;}
</style>
<![endif]--><!--[if lt IE 8]>
<style type="text/css">
	#whole{display:none;}
	#noie{display:block;}
</style>
<![endif]-->
<div id="noie">Please upgrade your browser to view this content.</div>

<div id="whole">
<div class="slider" id="left">&nbsp;</div>

<div class="slider" id="right">&nbsp;</div>

<div id="carousel">
<section class="pull-left">
<h1>Serif</h1>
<img src="http://cms-content.s.aeriastatic.com/09fc5330621b4bfaf039a05ed2a996a1/files/aurakingdom/image/e/eid_serif.jpg">
<article>
<div>
<h2>Descrição</h2>

<p>Vindo dos céus, Serif é um guerreiro astuto, que possuem poderes do elemento relâmpago. Pequeno e ágil, ele é um mestre em prevenir ataques inimigos e aplicar vários golpes ferozes. Há poucos inimigos
que podem sobreviver a fúria de sua energia de alta tensão...ou seus relâmpagos. Sempre otimista e alegre, Serif é um ótimo aliado que vai sempre ficar ao seu lado até nas piores batalhas.</p>
</div>

<div>
<h2>Status</h2>

<div class="stats-container">
<div class="stats-row">
<div class="stats-tile-l star-3">
<p class="pull-left">Único Alvo</p>
</div>

<div class="stats-tile-r star-1">
<p class="pull-left">Área de efeito</p>
</div>
</div>

<div class="stats-row">
<div class="stats-tile-l star-3">
<p class="pull-left">Defesa</p>
</div>

<div class="stats-tile-r star-2">
<p class="pull-left">Evasão</p>
</div>
</div>

<div class="stats-row">
<div class="stats-tile-l star-0">
<p class="pull-left">Cura</p>
</div>

<div class="stats-tile-r star-0">
<p class="pull-left">Suporte</p>
</div>
</div>
</div>
</div>
</article>
<iframe class="pull-left" style="width:79.8%; margin-top:2.5%;" allowfullscreen="" frameborder="0" src="http://www.youtube.com/embed/236aku56RrY?rel=0&amp;showinfo=0&amp;autohide=1&amp;theme=light"></iframe></section>

<section>
<h1>Merrilee</h1>
<img src="http://cms-content.s.aeriastatic.com/b4b2bf961bb92c91696de56c6d144320/files/aurakingdom/image/e/eid_merrilee.jpg">
<article>
<div>
<h2>Descrição</h2>

<p>Flutuando sobre os ventos do norte, Merrilee é uma sílfide manipuladora do elemento gelo. Habilidosa com espíritos mágicos, ajuda seus amigos com bênçãos defensivas poderosas e atacando seus inimigos com lâminas afiadas de gelo e blocos de gelo esmagadores. Marrilee é um espírito sociável que gosta de proteger as pessoas.
Embora seja um pouco vaidosa, ela ama seus cabelos, e usa uma pequena quantidade de magia para mantê-lo perfeito em seu estilo.</p>
</div>

<div>
<h2>Status</h2>

<div class="stats-container">
<div class="stats-row">
<div class="stats-tile-l star-1">
<p class="pull-left">Único Alvo</p>
</div>

<div class="stats-tile-r star-0">
<p class="pull-left">Área de efeito</p>
</div>
</div>

<div class="stats-row">
<div class="stats-tile-l star-2">
<p class="pull-left">Defesa</p>
</div>

<div class="stats-tile-r star-1">
<p class="pull-left">Evasão</p>
</div>
</div>

<div class="stats-row">
<div class="stats-tile-l star-3">
<p class="pull-left">Cura</p>
</div>

<div class="stats-tile-r star-2">
<p class="pull-left">Suporte</p>
</div>
</div>
</div>
</div>
</article>
<iframe class="pull-left" style="width:79.8%; margin-top:2.5%;" allowfullscreen="" frameborder="0" src="http://www.youtube.com/embed/XxApMr1N1L0?rel=0&amp;showinfo=0&amp;autohide=1&amp;theme=light"></iframe></section>

<section>
<h1>Grimm</h1>
<img src="http://cms-content.s.aeriastatic.com/9b390bf5c722333c777523c575f91a8d/files/aurakingdom/image/e/eid_grimm.jpg">
<article>
<div>
<h2>Descrição</h2>

<p>Ele pode ter saído a pouco tempo de seu ovo, mas o animado Grimm está pronto para enfrentar monstros com o dobro de seu tamanho. Quando está no campo de batalha, ele utiliza do elemento fogo para queimar seus inimigos. Quando adulto, Grimm terá grande poder mágico, mas, até então, seu sonho é viajar o mundo e comer tudo o que puder. Ás vezes impetuoso, mas sempre incendiário, Grimm aguarda com expectativa a cada nova aventura.</p>
</div>

<div>
<h2>Status</h2>

<div class="stats-container">
<div class="stats-row">
<div class="stats-tile-l star-3">
<p class="pull-left">Único Alvo</p>
</div>

<div class="stats-tile-r star-2">
<p class="pull-left">Área de Efeito</p>
</div>
</div>

<div class="stats-row">
<div class="stats-tile-l star-2">
<p class="pull-left">Defesa</p>
</div>

<div class="stats-tile-r star-1">
<p class="pull-left">Evasão</p>
</div>
</div>

<div class="stats-row">
<div class="stats-tile-l star-0">
<p class="pull-left">Cura</p>
</div>

<div class="stats-tile-r star-1">
<p class="pull-left">Suporte</p>
</div>
</div>
</div>
</div>
</article>
<iframe class="pull-left" style="width:79.8%; margin-top:2.5%;" allowfullscreen="" frameborder="0" src="http://www.youtube.com/embed/ydBD_7pX0D4?rel=0&amp;showinfo=0&amp;autohide=1&amp;theme=light"></iframe></section>

<section>
<h1 >Alessa</h1>
<img src="http://cms-content.s.aeriastatic.com/e3744a0721d30bb9c76342cfabf43732/files/aurakingdom/image/e/eid_alessa.jpg">
<article>
<div>
<h2>Descrição</h2>

<p>Trotando como uma realeza, Alessa é uma jovem unicórnio e mestre do elemento luz. Capaz de discernir a justiça dos mortais e espíritos com um olhar, ela usa seu poder sagrado para defender os justos e utiliza seu chifre como uma espada para destroçar os malfeitores deixando-os em pedaços. Almejando novos desafios para enfrentar com determinação inabalável, ela oferece uma parceria nobre cheia de verdade, justiça, e, de vez em quando, o arco-íris.</p>
</div>

<div>
<h2>Status</h2>

<div class="stats-container">
<div class="stats-row">
<div class="stats-tile-l star-2">
<p class="pull-left">Único Alvo</p>
</div>

<div class="stats-tile-r star-2">
<p class="pull-left">Área de efeito</p>
</div>
</div>

<div class="stats-row">
<div class="stats-tile-l star-1">
<p class="pull-left">Defesa</p>
</div>

<div class="stats-tile-r star-3">
<p class="pull-left">Evasão</p>
</div>
</div>

<div class="stats-row">
<div class="stats-tile-l star-0">
<p class="pull-left">Cura</p>
</div>

<div class="stats-tile-r star-1">
<p class="pull-left">Suporte</p>
</div>
</div>
</div>
</div>
</article>
<iframe class="pull-left" style="width:79.8%; margin-top:2.5%;" allowfullscreen="" frameborder="0" src="http://www.youtube.com/embed/mpc0bQSrcwk?rel=0&amp;showinfo=0&amp;autohide=1&amp;theme=light"></iframe></section>
</div>
</div>
<script type="text/javascript">
var leftBtn = document.getElementById('left');
var rightBtn = document.getElementById('right');
var carousel = document.getElementById('carousel');

var distance = carousel.style;
var sections = carousel.querySelectorAll('section').length;
//alert(carousel.querySelectorAll('section')[0].querySelector('img').src);
var boxDim = 712;

var boxNum = 0;
var imgSrc;
var sliderTags = '<aside></aside><span><img src="|">'.split('|');

var vidSrc = carousel.querySelectorAll('iframe');
var srcArray = [];

for(i=0; i<vidSrc.length; i++){
	srcArray.push(vidSrc[i].src);
	vidSrc[i].src = '';
}

/*console.log(srcArray);*/

function sliderGuns(childArrayNum, sliderBtns){
	if(sections < 2){
		imgSrc = carousel.querySelectorAll('section')[0].querySelector('img').src;
	}
	else{
		imgSrc = carousel.querySelectorAll('section')[childArrayNum].querySelector('img').src;
	}
	sliderBtns.innerHTML = sliderTags[0] + imgSrc + sliderTags[1];
}
sliderGuns(boxNum + 1, rightBtn);
sliderGuns(sections - 1, leftBtn);

function setSliders(){
  carousel.style.width = sections * boxDim + 'px';
  vidSrc[0].src = srcArray[0];
  if(sections < 2){
    leftBtn.style.display = "none";
    rightBtn.style.display = "none";
  }
}
setSliders();

rightBtn.addEventListener('click', function(){
  var wed = distance.left.substring(distance.left.indexOf('p') , 0);
  /*console.log(wed)*/
  
  if(boxNum + 1 == sections){
  	vidSrc[0].src = srcArray[0];
  }
  else{
  	vidSrc[boxNum + 1].src = srcArray[boxNum + 1];
  }
  
  vidSrc[boxNum].src = '';
  if(sections - 1 == boxNum){
  	
	distance.left = '0px';
    boxNum = 0;
      
    imgSrc = carousel.querySelectorAll('section')[1].querySelector('img').src;
	rightBtn.innerHTML = sliderTags[0] + imgSrc + sliderTags[1];
	  
	imgSrc = carousel.querySelectorAll('section')[sections - 1].querySelector('img').src;
	leftBtn.innerHTML = sliderTags[0] + imgSrc + sliderTags[1];
	  
    /*console.log('right if');*/
  }
  else if(sections - 2 == boxNum){
  	distance.left = (Number(wed) - boxDim) + 'px';
    boxNum++;
    imgSrc = carousel.querySelectorAll('section')[0].querySelector('img').src;
	rightBtn.innerHTML = sliderTags[0] + imgSrc + sliderTags[1];
	
	imgSrc = carousel.querySelectorAll('section')[boxNum - 1].querySelector('img').src;
	leftBtn.innerHTML = sliderTags[0] + imgSrc + sliderTags[1];
	
	/*console.log('right else if');*/
  }
  else{
  	
    distance.left = (Number(wed) - boxDim) + 'px';
    boxNum++;
    imgSrc = carousel.querySelectorAll('section')[boxNum + 1].querySelector('img').src;
	rightBtn.innerHTML = sliderTags[0] + imgSrc + sliderTags[1];
	
	imgSrc = carousel.querySelectorAll('section')[boxNum - 1].querySelector('img').src;
	leftBtn.innerHTML = sliderTags[0] + imgSrc + sliderTags[1];
    
    /*console.log('right else');
    console.log(boxNum);*/
  }
  
});


leftBtn.addEventListener('click', function(){
  var wed = distance.left.substring(distance.left.indexOf('p') , 0);
  if(boxNum == 0){
  	vidSrc[sections - 1].src = srcArray[sections - 1];
  }
  else{
  	vidSrc[boxNum - 1].src = srcArray[boxNum - 1];
  }
  
  vidSrc[boxNum].src = '';
  if(boxNum == 0){
    distance.left = (- sections * boxDim) + boxDim + 'px';
    boxNum = sections - 1;
    
    imgSrc = carousel.querySelectorAll('section')[sections - 2].querySelector('img').src;
    leftBtn.innerHTML = sliderTags[0] + imgSrc + sliderTags[1];
    
    imgSrc = carousel.querySelectorAll('section')[0].querySelector('img').src;
    rightBtn.innerHTML = sliderTags[0] + imgSrc + sliderTags[1];
    
    /*console.log(boxNum);
    console.log('left if');*/
    
  }
  else if(-boxDim == Number(wed)){
    distance.left = (Number(wed) + boxDim) + 'px';
    boxNum--;
    imgSrc = carousel.querySelectorAll('section')[sections - 1].querySelector('img').src;
    leftBtn.innerHTML = sliderTags[0] + imgSrc + sliderTags[1];
    
    imgSrc = carousel.querySelectorAll('section')[boxNum + 1].querySelector('img').src;
    rightBtn.innerHTML = sliderTags[0] + imgSrc + sliderTags[1];
  
    /*console.log(boxNum);
  	console.log('left else if');*/
  }
  else{
    distance.left = (Number(wed) + boxDim) + 'px';
    boxNum--;
    imgSrc = carousel.querySelectorAll('section')[boxNum - 1].querySelector('img').src;
    leftBtn.innerHTML = sliderTags[0] + imgSrc + sliderTags[1];
    
    /*console.log(boxNum);
    console.log('left else');*/
  }  
});
</script>	
		
</div>
<!-- end content -->

